<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h2 class="mb-5 flex items-center">数组转数组对象结构</h2>
                <Codemirror :code="array1Code" name="for数组转数组对象结构" class="mb-10" />
                <Codemirror :code="array2Code" name="for...in数组对象添加新属性" class="mb-10" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const array1Code = ref(`let arr = []
let arr2 = ['1', '2', '3']

for (let i = 0; i < arr2.length; i++) {
  var obj = {}
  obj.id = i
  obj.name = arr2[i]
  arr.push(obj)
}
console.log(JSON.stringify(arr))`)

        const array2Code = ref(`let arr = []
let arr2 = ['1', '2', '3']

for (let i in arr2) {
  var obj = {}
  obj.id = i
  obj.name = arr2[i]
  arr.push(obj)
}
console.log(JSON.stringify(arr))`)

        return {
            array1Code,
            array2Code,
        }
    }
})
</script>

<style scoped>

</style>